src/pages/Home.jsx (3)

257-269: 사진 목록에서 index를 key로 사용하고 있습니다.

사진이 재정렬되거나 변경될 수 있다면 diaryId 또는 고유 식별자를 key로 사용하는 것이 더 안전합니다.

💡 고유 key 사용 제안

-{recentPhotos.slice(0, 3).map((photo, index) => (
-  <RecentImageWrapper
-    key={index}
+{recentPhotos.slice(0, 3).map((photo) => (
+  <RecentImageWrapper
+    key={photo.diaryId}
     onClick={() => handlePhotoClick(photo.diaryId)}
   >

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/pages/Home.jsx` around lines 257 - 269, The list is using the loop index
as the React key which can cause incorrect rendering when items reorder; update
the mapping in the RecentPhotosList to use a stable unique identifier (e.g.,
photo.diaryId) as the key instead of index — locate the map over recentPhotos
(where RecentImageWrapper, RecentImage and handlePhotoClick are used) and change
key from index to the unique id (or a stable fallback property if diaryId may be
absent).

---

170-171: 날짜 형식 파싱에서 예외 처리가 필요할 수 있습니다.

recommendation.targetDate가 예상과 다른 형식(예: YYYY-MM-DD가 아닌 경우)이면 split("-")와 parseInt에서 의도치 않은 결과가 발생할 수 있습니다.

💡 방어적 파싱 제안

+const formatRecommendationDate = (dateStr) => {
+  const parts = dateStr?.split("-");
+  if (!parts || parts.length !== 3) return dateStr || "";
+  return `${parts[0]}년 ${parseInt(parts[1], 10)}월 ${parseInt(parts[2], 10)}일`;
+};
+
 const getRecommendationDisplay = () => {
   // ...
-  const dateParts = recommendation.targetDate.split("-");
-  const formattedDate = `${dateParts[0]}년 ${parseInt(dateParts[1], 10)}월 ${parseInt(dateParts[2], 10)}일`;
+  const formattedDate = formatRecommendationDate(recommendation.targetDate);

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/pages/Home.jsx` around lines 170 - 171, The date parsing for
recommendation.targetDate is brittle: validate that recommendation.targetDate is
a string matching the expected YYYY-MM-DD pattern before calling split and
parseInt, e.g., check typeof recommendation.targetDate === 'string' and a simple
regex like /^\d{4}-\d{1,2}-\d{1,2}$/; if validation fails, use a safe fallback
(e.g., empty string, null, or a localized "Invalid date" label) for
formattedDate and avoid calling dateParts[?] or parseInt, and ensure dateParts
length is checked (dateParts.length === 3) before constructing formattedDate to
prevent runtime errors in the code that defines dateParts and formattedDate.

---

56-86: 첫 번째 useEffect에서 비동기 작업 취소 처리가 누락되었습니다.

두 번째 useEffect(lines 88-109)에서는 cancelled 플래그를 사용하여 컴포넌트 언마운트 시 상태 업데이트를 방지하고 있지만, 이 useEffect에서는 동일한 패턴이 적용되지 않았습니다. 컴포넌트가 언마운트된 후 API 응답이 도착하면 메모리 누수 경고가 발생할 수 있습니다.

♻️ 취소 플래그 추가 제안

 useEffect(() => {
+  let cancelled = false;
+
   const fetchData = async () => {
     try {
       const diaryRes = await getDiariesList();
+      if (cancelled) return;
       const diaryData = Array.isArray(diaryRes)
         ? diaryRes
         : (diaryRes?.data ?? []);
       setDiaries(diaryData);
       // ... rest of the code
     } catch (error) {
-      console.error("데이터 로딩 실패:", error);
+      if (!cancelled) {
+        console.error("데이터 로딩 실패:", error);
+      }
     }
   };

   fetchData();
+  return () => {
+    cancelled = true;
+  };
 }, []);

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/pages/Home.jsx` around lines 56 - 86, The first useEffect's async
fetchData (calling getDiariesList, getDiaryRecommendation, getUserSummary) lacks
an unmount cancellation guard; add a local cancelled flag (let cancelled =
false) in the useEffect, check if (!cancelled) before calling state setters
(setDiaries, setTotalDays, setRecentPhotos, setRecommendation, setSummary) after
each awaited response, and return a cleanup function that sets cancelled = true
so no state updates occur after the component unmounts.

src/pages/EditDiary.jsx (1)

104-108: 날짜가 빈 문자열일 경우 파싱 로직에서 문제가 발생할 수 있습니다.

Line 33에서 data.createdAt || ""로 fallback하면 빈 문자열이 될 수 있습니다. 이 경우 "".includes("-")는 false를 반환하여 빈 문자열이 그대로 렌더링됩니다. 빈 날짜에 대한 처리를 명시적으로 추가하는 것이 좋습니다.

💡 빈 날짜 처리 개선

 <h2>
-  {date.includes("-")
+  {date && date.includes("-")
     ? `${date.split("-")[0]}년 ${parseInt(date.split("-")[1])}월 ${parseInt(date.split("-")[2])}일`
-    : date}
+    : date || "날짜 없음"}
 </h2>

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/pages/EditDiary.jsx` around lines 104 - 108, The displayed date rendering
currently assumes `date` may be non-empty and uses `date.includes("-")` which
leaves an empty string rendered when `date` is falsy; update the rendering logic
(the `date` variable coming from `data.createdAt || ""` and the <h2> block) to
explicitly check for an empty/falsy `date` before parsing and render a safe
placeholder (e.g., "날짜 없음" or "—") when missing; when present, keep the existing
hyphen-split parsing (use `date.split("-")` / `parseInt` as before) so the
component never attempts to parse or display an empty string.

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes